<template>
  <div>
    <el-dialog title="全景图批量上传" :fullscreen=true :close-on-click-modal="false" :visible.sync="visible">
      <span slot="title" class="uni-title">
        全景图批量上传
        <el-popover placement="bottom" width="240" trigger="hover">
          <div class="uni-popover-notice">
            1、录点时需记录设备号+照片名<span>如：1R0010039</span>1表示VR相机1<br />2、批量上传时选择相机编号，系统会在jf_vr_list表中找name为<span>相机编号+上传的照片名称：1R0010039</span>进行匹配，一致的话将对应上，若对应的记录存在图片数据，则抛出异常不自动进行替换
          </div>
          <i slot="reference" class="el-icon-question" style="color: #666666;"></i>
        </el-popover>
      </span>
      <el-row :gutter="10">
        <el-col :span="15">
          <el-card shadow="never" :body-style="contentViewHeight" class="uni-map-panel">
            <el-col :span="24" v-for="(item, index) in files" :key='index'>
              <vr-upload-ext :limit="10000" :accept="item.format" :fileType="item.fileType" :width="item.width"
                :height="item.height" :outputSize="0.7" outputType="jpeg" :allowScale="false" :maxImageSize="10485760"
                :directUpload="true" @onError="onErrorList" @onProgress="onProgress" :cameraCode="cameraCode">
              </vr-upload-ext>
            </el-col>
          </el-card>
        </el-col>
        <el-col :span="9">
          <el-card shadow="never" :body-style="contentViewHeight" class="uni-data-panel">
            <div>当前处理：{{progressFileName}}</div>
            <div class="uni-error" v-for="err in errorList">{{err}}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import VrUploadExt from '@/components/vrUploadExt/index.vue'
  export default {
    data() {
      return {
        visible: false,
        loading: false,
        errorList: [],
        cameraCode: '',
        progressFileName: '',
        files: [{
          label: '全景图',
          value: 'img',
          format: '.JPG,.JPEG',
          fileType: '2',
          width: '2048',
          height: '1024'
        }]
      }
    },
    computed: {
      contentViewHeight() {
        let height = this.$store.state.common.documentClientHeight - 152
        return {
          height: height + 'px'
        }
      }
    },
    components: {
      VrUploadExt
    },
    methods: {
      init() {
        this.$prompt('请输入相机编码', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          inputErrorMessage: '请输入相机编码，1号相机1'
        }).then(({
          value
        }) => {
          this.cameraCode = value || ''
          this.visible = true
          this.loading = false
          this.errList = []
          this.progressFileName = ''
        }).catch(() => {

        });
      },
      onProgress(fileName) {
        this.progressFileName = fileName
      },
      onErrorList(list) {
        this.errorList = list
      }
    }
  }
</script>
<style lang="less" scoped="scoped">
  .uni-title {
    font-size: 14px;
  }

  .uni-popover-notice {
    font-size: 12px;

    span {
      color: #F5222D;
    }
  }

  .uni-error {
    color: #F5222D;
    line-height: 1.4;
    font-size: 12px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
  }
</style>
